<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mark Anything - Tools</title>
    <link rel="stylesheet" href="styles/tools.css">
    <link rel="stylesheet" href="styles/idcard.css">
</head>
<body>
    <div class="app-container">
        <!-- 左侧工具导航 -->
        <nav class="tools-nav">
            <div class="nav-header">
                <h1>Mark Anything</h1>
                <p class="subtitle">工具箱</p>
            </div>
            <div class="nav-tools">
                <button class="nav-item active" data-tool="qrcode">
                    <span class="tool-icon">🔲</span>
                    <span class="tool-name">二维码生成</span>
                </button>
                <button class="nav-item" data-tool="idcard">
                    <span class="tool-icon">🪪</span>
                    <span class="tool-name">身份证生成</span>
                </button>
                <button class="nav-item" data-tool="text">
                    <span class="tool-icon">📝</span>
                    <span class="tool-name">文本工具</span>
                </button>
                <button class="nav-item" data-tool="image">
                    <span class="tool-icon">🖼️</span>
                    <span class="tool-name">图片工具</span>
                </button>
                <button class="nav-item" data-tool="url">
                    <span class="tool-icon">🔗</span>
                    <span class="tool-name">链接工具</span>
                </button>
                <div class="nav-divider"></div>
                <div class="custom-tools-section">
                    <div class="custom-tools-header">
                        <span>自定义工具</span>
                        <button id="addCustomTool" class="add-tool-btn" title="添加自定义工具">+</button>
                    </div>
                    <div id="customToolsList">
                        <!-- Custom tools will be dynamically inserted here -->
                    </div>
                </div>
            </div>
        </nav>

        <!-- 右侧工具内容区 -->
        <main class="tools-content">
            <!-- 二维码生成器 -->
            <div class="tool-panel active" id="qrcode-tool">
                <div class="tool-header">
                    <h2>二维码生成器</h2>
                    <p class="tool-description">将文本或链接转换为二维码</p>
                </div>
                <div class="tool-body">
                    <div class="qr-generator-layout">
                        <div class="qr-input-section">
                            <div class="input-group">
                                <input type="text" id="urlInput" placeholder="输入网址或文本内容">
                                <button id="generateQR" class="primary-button">生成</button>
                            </div>
                            <div class="qr-options">
                                <div class="option-item">
                                    <span class="option-label">前景色</span>
                                    <input type="color" id="qrColor" value="#000000" title="前景色">
                                </div>
                                <div class="option-item">
                                    <span class="option-label">背景色</span>
                                    <input type="color" id="qrBgColor" value="#FFFFFF" title="背景色">
                                </div>
                                <div class="option-item">
                                    <span class="option-label">尺寸</span>
                                    <select id="qrSize" title="二维码大小">
                                        <option value="120">小</option>
                                        <option value="160" selected>中</option>
                                        <option value="200">大</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="qr-result-section">
                            <div id="qrResult"></div>
                            <button id="downloadQR" class="download-button" style="display: none;">
                                <span class="download-icon">↓</span>
                                <span class="download-text">下载</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 身份证生成器 -->
            <div class="tool-panel" id="idcard-tool">
                <div class="tool-header">
                    <h2>身份证号生成器</h2>
                    <p class="tool-description">生成符合规则的中国大陆居民身份证号码</p>
                </div>
                <div class="tool-body">
                    <div class="idcard-generator">
                        <form class="idcard-form" id="idcardForm">
                            <div class="idcard-form-row">
                                <div class="idcard-form-group">
                                    <label for="province">选择省份</label>
                                    <select id="province" required>
                                        <option value="">请选择省份</option>
                                    </select>
                                </div>
                                <div class="idcard-form-group">
                                    <label for="city">选择城市</label>
                                    <select id="city" required>
                                        <option value="">请选择城市</option>
                                    </select>
                                </div>
                            </div>
                            <div class="idcard-form-row">
                                <div class="idcard-form-group">
                                    <label for="birthDate">出生日期</label>
                                    <input type="date" id="birthDate" required min="1900-01-01">
                                </div>
                                <div class="idcard-form-group">
                                    <label for="count">生成数量</label>
                                    <input type="number" id="count" min="1" max="100" value="1" required>
                                </div>
                            </div>
                            <button type="submit" class="idcard-generate-btn">生成身份证号</button>
                        </form>
                        <div class="idcard-results" style="display: none;">
                            <div class="idcard-results-header">
                                <h3 class="idcard-results-title">生成结果</h3>
                                <div style="display: flex; gap: 8px;">
                                    <button class="idcard-copy-btn">
                                        <span>📋</span>
                                        <span>复制全部</span>
                                    </button>
                                    <button class="idcard-export-btn">
                                        <span>📥</span>
                                        <span>导出CSV</span>
                                    </button>
                                </div>
                            </div>
                            <ul class="idcard-list"></ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文本工具 -->
            <div class="tool-panel" id="text-tool">
                <div class="tool-header">
                    <h2>文本工具</h2>
                    <p class="tool-description">文本格式化、转换等功能</p>
                </div>
                <div class="tool-body coming-soon">
                    <div class="coming-soon-content">
                        <span class="coming-soon-icon">🚧</span>
                        <p>功能开发中，敬请期待...</p>
                    </div>
                </div>
            </div>

            <!-- 图片工具 -->
            <div class="tool-panel" id="image-tool">
                <div class="tool-header">
                    <h2>图片工具</h2>
                    <p class="tool-description">图片处理与转换功能</p>
                </div>
                <div class="tool-body coming-soon">
                    <div class="coming-soon-content">
                        <span class="coming-soon-icon">🚧</span>
                        <p>功能开发中，敬请期待...</p>
                    </div>
                </div>
            </div>

            <!-- 链接工具 -->
            <div class="tool-panel" id="url-tool">
                <div class="tool-header">
                    <h2>链接工具</h2>
                    <p class="tool-description">URL编解码、短链接生成等</p>
                </div>
                <div class="tool-body coming-soon">
                    <div class="coming-soon-content">
                        <span class="coming-soon-icon">🚧</span>
                        <p>功能开发中，敬请期待...</p>
                    </div>
                </div>
            </div>

            <!-- 自定义工具面板模板 -->
            <div class="tool-panel custom-tool-panel" id="custom-tool-template" style="display: none;">
                <div class="tool-header">
                    <h2 class="custom-tool-name"></h2>
                    <div class="tool-actions">
                        <button class="remove-tool-btn" title="删除工具">🗑️</button>
                    </div>
                </div>
                <div class="tool-body">
                    <iframe class="custom-tool-frame" src="about:blank" frameborder="0"></iframe>
                </div>
            </div>

            <!-- 添加自定义工具对话框 -->
            <div id="addToolDialog" class="dialog" style="display: none;">
                <div class="dialog-content">
                    <h3>添加自定义工具</h3>
                    <form id="addToolForm">
                        <div class="form-group">
                            <label for="toolName">工具名称</label>
                            <input type="text" id="toolName" required>
                        </div>
                        <div class="form-group">
                            <label for="toolUrl">工具链接</label>
                            <input type="url" id="toolUrl" required>
                        </div>
                        <div class="dialog-buttons">
                            <button type="button" class="cancel-btn">取消</button>
                            <button type="submit" class="submit-btn">添加</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

    <script src="js/qrcode.min.js"></script>
    <script src="js/idcard_generator.js"></script>
    <script src="js/custom_tools_repository.js"></script>
    <script src="js/tools.js"></script>
</body>
</html>